<template>
	<view class="pagePay" >
		<view class="payContainer">
			<view class="addressContainer" >
				<view class="addressDefault" style="position: relative;">
					<i class="iconfont icon-dizhi" style="font-size: 40upx;font-weight: bold;color:#999999;position: absolute;left:10upx;top:35%;"></i>
					<navigator style="position: absolute;right:10upx;top:35%;"><i class="iconfont icon-ionf-xia"></i></navigator>
					<view class="">
						<view class="cell">
							<text class="t">{{detailData.receiver_name}}</text> <text class="st" style="margin-left: 20upx;"> {{detailData.receiver_mobile}}</text>
						</view>
						<view class="cell address">						
							<rich-text :nodes="detailData.receiver_address"></rich-text>
						</view>
					</view>
				</view>
			</view>
			<view class="heightGray"></view>
			<!-- 商品 -->
			<view class="venderOrderList">
				<view>
					<view class="venderImgList">
						<view class="picM">
							<view class="pic">
								<image :src="detailData.order_goods[0].picture_info.pic_cover_small" alt="" mode="aspectFill" lazy-load></image>
							</view>
						</view>
						<view class="rightArrow" @click="changeDetail()">
							<text>共{{detailData.order_goods[0].num}}件</text>
							<i class="iconfont icon-ionf-xia"></i>
						</view>
					</view>
					<view class="venderItemRemarks" style=""><label for="">备注：</label>
						<input type="text"  maxlength="100" v-model="detailData.buyer_message" disabled>
					</view>
					<view class="heightGray"></view>
				</view>
			</view>
		</view>
		<!-- 广告图 -->
		<view class="heightGray"></view>
		<view class="picShow">
			<a href="#">
				<image :src="adBanner" alt=""></image>
			</a>
		</view>
		<!-- 支付方式 -->
		<view class="heightGray"></view>
		<view class="heightGray"></view>
		<view class="payPrice" >
			<view class="priceList">
				<view class="txt">商品金额</view>
				<view class="price red"><i class="iconfont icon-rmb"></i>{{detailData.order_goods[0].market_price}}</view>
			</view>
			<view class="priceList">
				<view class="txt">商品优惠</view>
				<view class="price red"><i class="iconfont icon-rmb"></i>0</view>
			</view>
			<view class="priceList">
				<view class="txt">运费</view>
				<view class="price red"><i class="iconfont icon-rmb"></i>0</view>
			</view>
		</view>
		<!-- 我的余额 -->
		<view class="heightGray"></view>
		<view class="myAddress" >		
			送至：<rich-text :nodes="detailData.receiver_address"></rich-text>
		</view>
		<view class="payOnline">
			<view class="txt">应需支付 ：<view class="red"><i class="iconfont icon-rmb"></i>{{detailData.pay_money}}</view>
			</view>
			<view class="payBtn" @click="submitPay">立即支付</view>
		</view>
		<!-- 支付 状态 -->
		<!-- 查看商品 -->
		<uni-popup v-model="popupVisible" :show="type === 'bottom'" position="bottom">
			<view class="popupItemDetail">
				<view class="title">
					商品清单<text>（共{{detailData.order_goods[0].num}}件）</text>
					<i class="iconfont icon-cha" @click="type=''"></i>
				</view>
				<view>
					<view class="popItemList">
						<view class="pic">
							<img :src="detailData.order_goods[0].picture_info.pic_cover_small|| '/static/temp/error.jpg'" alt="">
						</view>
						<view class="text">
							<h4>
								{{detailData.order_goods[0].goods_name}}
							</h4>

							<view class="price">
								<text class="fr">x{{detailData.order_goods[0].num}}</text>
								<i class="iconfont icon-rmb"></i>{{detailData.order_goods[0].market_price}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		data() {
			return {																												
				popupVisible: false, // 弹窗商品详情				
				adBanner: './static/images/temp/cz.jpg', // 广告				
				totalFee: 0.00,
				detailData: null,				
				visiblePopup: {
					paymentContainerVisible: false,
					paymentLoadingVisible: false,
					selectedAdressVisible: false
				},
				payForCheck: "1",
				payForList: [{
					id: 'wxpay',
					name: "微信",
					type: "1",
					pic: require('@/static/temp/wxpay.jpg'),
					desc: "亿万用户的选择，更快更安全",
					loading: false
				}],
				type: '',
				// 
				order_id:null
			};
		},

		watch: {},

		components: {
			uniPopup

		},

		computed: {
			...mapState(['userInfo', 'hasLogin']),
		},
		async onLoad(options) {
			console.log(options.order_id)
			if(options.order_id){
				this.order_id=options.order_id;
				this.initData()
			}
		},
		methods: {
			switchTo(url) {
				uni.switchTab({
					url: url
				})
			},
			changeDetail(productItem) {
				this.currDetail = productItem;
				this.popupVisible = true;
				this.type = 'bottom';
			},

			weixinPay() {
				// #ifdef MP-WEIXIN
				uni.login({
					success: (e) => {
						let userInfo = uni.getStorageSync('userInfo');
						uni.request({
							url: this.$base_url + '/pay/orderPay',
							data: {
								pay_type: this.payForCheck,
								out_trade_no: this.submitAfter
							},
							header: {
								"Content-Type": "application/x-www-form-urlencoded",
								"token": userInfo.token,
							},
							method: "POST",
							success: (res) => {
								console.log("pay request success", res);
								var data = res.data;
								if (data.code === 10000) {
									let paymentData = data.data;
									if (!paymentData) {
										this.$api.msg(res.data.message);
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/home/home'
											})
										}, 1000)
									} else {

										uni.requestPayment({
											timeStamp: paymentData.timeStamp,
											nonceStr: paymentData.nonceStr,
											package: paymentData.package,
											signType: 'MD5',
											paySign: paymentData.paySign,
											success: (res) => {

												uni.showToast({
													title: "支付成功!"
												})
												this.$nextTick(() => {
													let obj = {
														orderPay: this.confirmSelectedProduct.price,
														flag: true
													}
													let money = JSON.stringify(obj);
													uni.navigateTo({
														url: '/pages/paySuccess/paySuccess?payMoney=' + money
													})
												});
											},
											fail: (res) => {

												this.$api.msg("取消支付");
												this.$nextTick(() => {
													uni.switchTab({
														url: '/pages/index/index'
													})
												});
											},
											complete: () => {
												this.loading = false;
											}
										})

									}
								} else {
									this.$api.msg(res.data.message);
								}
							},
							fail: (e) => {
								console.log("fail", e);
								this.loading = false;
								this.$api.msg("支付失败,原因为: " + e.errMsg);
							}
						})
					},
					fail: (e) => {
						console.log("fail", e);
						this.loading = false;
						this.$api.msg("支付失败,原因为: " + e.errMsg);
					}
				})
				// #endif
				// #ifndef MP-WEIXIN				
				let userInfo = uni.getStorageSync('userInfo');
				uni.request({
					url: this.$base_url + '/pay/orderPay',
					data: {
						pay_type: this.payForCheck,
						out_trade_no: this.submitAfter
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": userInfo.token,
					},
					method: "POST",
					success: (res) => {
						console.log("pay request success", res);
						var data = res.data;
						if (data.code === 10000) {
							let paymentData = data.data;
							if (!paymentData) {
								this.$api.msg(res.data.message);
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/home/home'
									})
								}, 1000)
							} else {
								location.href = paymentData.mweb_url;
								setTimeout(() => {
									uni.navigateTo({
										url: '/pages/paySuccess/paySuccess'
									})
								},2000)
							}

						} else {
							this.$api.msg(res.data.message);
						}
					},
					fail: (e) => {
						console.log("fail", e);
						this.loading = false;
						this.$api.msg("支付失败,原因为: " + e.errMsg);
					}
				})
				// #endif
			},
			selectedAddress(item) {
				this.visiblePopup.selectedAdressVisible = false;
				this.addressData.map(item => item.Selected = 9);
				item.Selected = 1;
			},
			async initData() {
				uni.showLoading({
					title: 'loading'
				});
				let userInfo = uni.getStorageSync('userInfo');
				uni.request({
					url: this.$base_url + '/order/orderDetail', //仅为示例，并非真实接口地址。
					data: {
						order_id: this.order_id
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded",
						"token": userInfo.token,
					},
					method: "POST",
					success: (res) => {
						if (res.data.code === 10000) {
							uni.hideLoading();
							this.detailData = res.data.data;														
						} else {							
							this.$api.msg(res.data.message);							
						}
						uni.hideLoading();
					},
					fali: (res) => {
						console.log(res.data);
					}
				});
				// 商品列表
			},			
			submitPay() {
				uni.showLoading({
					title: 'loading'
				});
				this.submitAfter =this.detailData.out_trade_no;
				this.weixinPay();
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../createOrder/createOrder.scss';
	@import '../createOrder/cart.scss';
</style>
<style lang="scss">
	.item-options:active {
		background: #FBFBFB;
	}

	.item-options {
		border-bottom: 1px solid #F2F2F2;
		overflow: hidden;
		line-height: 45px;
		padding: 0 10px;
	}

	.account_balance,
	.account_point {
		color: #ff4000;
		font-size: 14px !important;
	}

	.iconfont {
		display: inline-block;
	}

	.paymentContainer .mint-cell-wrapper {
		background-image: none;
	}

	.pagePay .payContainer .venderOrderList .venderItem .orderInfo .title {
		width: 592upx;
		margin: 0px 0px 0px 0px;
	}

	.select-default-icon {
		display: inline-block;
		width: 40upx;
		height: 40upx;
		// background: url('/static/temp/de_icon.png') no-repeat;
		background-size: 100% 100%;
	}

	.select-icon {
		// background: url('/static/temp/se_icon.png') no-repeat !important;
		background-size: 100% 100% !important;
	}

	.uni-input-placeholder {
		font-size: 28upx;
		top: 66%;
	}

	.clear {
		clear: both
	}

	picker-view {
		width: 100%;
		height: 5rem;
	}

	picker-view-column {
		line-height: 80upx;
	}
</style>
